<!--
 * @Author: LiMG
 * @Date: 2024-01-27 22:45:31
 * @Description: 通用确认弹窗
-->
<script setup lang="ts" name="CommonDialog">
import { defineEmits, PropType } from 'vue';

const emit = defineEmits(['confirm', 'cancel', 'close']);

interface DialogInfo {
    // 弹窗标题
    title: String;
    // 弹窗内容
    content: String;
    // 确定按钮文字
    confirmText: String;
    // 取消按钮文字
    cancelText: String;
}
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    dialogInfo: {
        type: Object as PropType<DialogInfo>,
        required: true,
    },
});

// 点击确定
const comfirm = () => {
    emit('confirm');
};

// 点击取消
const cancel = () => {
    emit('cancel');
};

// 点击关闭
const close = () => {
    emit('close');
};
</script>

<template>
    <div class="dialog">
        <el-dialog :model-value="props.visible" :title="props.dialogInfo.title" width="30%" @close="close">
            <span>{{ props.dialogInfo.content }}</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">{{ props.dialogInfo.cancelText }}</el-button>
                    <el-button type="primary" @click="comfirm">{{ props.dialogInfo.confirmText }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>